<template>
  <div class="container">
    <div class="flex flex-row gap-10 place-content-center place-items-stretch w-full h-full">
      <img src="../assets/represe.webp" alt="Description" class="image w-5/7">
      <div class="left flex flex-col justify-center items-center gap-8 w-2/7">
        <div class="title-container mb-20">
          <h1 class="death_title text-5xl font-bold">Early death prediction model</h1>
        </div>
        <div class="button-container flex flex-col items-center gap-6 w-full">
          <button @click="goToPage2"
            class="bg-[#3F849F] hover:bg-[#3F849F] text-white font-bold py-4 px-8 rounded-xl button">
            Quick questionnaire
          </button>
          <button @click="goToPage1"
            class="bg-[#3B566D] hover:bg-[#3B566D] text-white font-bold py-4 px-8 rounded-xl button">
            Full questionnaire
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>

.container {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  margin: 0; /* 取消容器两侧的空白区域 */
  padding: 20px 10px 10px 10px; /* 顶部和底部留10px空白，左侧留10px空白，右侧不留空白 */
  width: calc(100vw - 10px); /* 设置容器宽度为视口宽度减去左侧空白区域 */
  height: calc(100vh - 20px); /* 设置容器高度为视口高度减去顶部和底部空白 */
  box-sizing: border-box; /* 确保padding包含在宽度和高度内 */
}

.image {
  width: 100%; /* 确保图片宽度适应容器 */
  height: auto; /* 确保图片高度自动调整 */
  max-height: calc(100vh - 20px); /* 确保图片高度不超过视口高度减去顶部和底部空白 */
  border-radius: 50px; /* 设置圆角 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* 增加阴影效果 */
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(211, 206, 206, 0)) padding-box, 
              linear-gradient(to right, white, rgb(216, 212, 212)) border-box; /* 白灰渐变 */
  border: 30px solid transparent; /* 设置透明边框以显示渐变效果，增加渐变距离 */
  filter: contrast(0.8); /* 降低对比度 */
}

.death_title {
  white-space: nowrap; /* 控制文字不折行 */
}

.title-container {
  margin-top: 0%;
  margin-bottom: 120px; /* 增加标题与按钮之间的距离 */
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 增加按钮之间的间距 */
  width: 100%;
}

.button {
  width: 100%;
  max-width: 300px; /* 设置按钮的最大宽度 */
}
</style>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const goToPage1 = () => {
  router.push('/FullSurvey')
}
const goToPage2 = () => {
  router.push('/SimpleSurvey')
}
</script>